<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<!--

`core-dropdown-menu` is a control where the user can choose from an array of options in a drop-down
menu. The currently selected option is displayed in the control.

Example:

    <core-dropdown-menu selected="Financier" valueattr="label">
        <core-item label="Croissant"></core-item>
        <core-item label="Donut"></core-item>
        <core-item label="Financier"></core-item>
        <core-item label="Madeleine"></core-item>
    </core-dropdown-menu>

This example renders a drop-down menu with 4 options, with the option `Financier` pre-selected.

Theming
-------

Style the drop-down menu with the `core-dropdown-menu::shadow #dropdown` selector.

Example:

    core-dropdown-menu::shadow #dropdown {
        border: 1px solid #ccc;
        max-height: 12px;
    }

To modify the drop-down's margins, use the same selector. The default margin is 12px.

    core-dropdown-menu::shadow #dropdown {
        margin: 24px;
    }

@group Polymer Core Elements
@element core-dropdown-menu
@status beta
@homepage github.io
-->

<!--
Fired when an item's selection state is changed. This event is fired both
when an item is selected or deselected. The `isSelected` detail property
contains the selection state.

@event core-select
@param {Object} detail
  @param {boolean} detail.isSelected true for selection and false for deselection
  @param {Object} detail.item the item element
-->

<!--
Fired when an item element is tapped.

@event core-activate
@param {Object} detail
  @param {Object} detail.item the item element
-->

<link href="../polymer/polymer.html" rel="import">
<link href="../core-icon/core-icon.html" rel="import">
<link href="../core-icons/core-icons.html" rel="import">
<link href="../core-item/core-item.html" rel="import">
<link href="../core-menu/core-menu.html" rel="import">
<link href="../core-dropdown/core-dropdown.html" rel="import">

<polymer-element name="core-dropdown-menu">
<template>

  <link href="core-dropdown-menu.css" rel="stylesheet">

  <div id="control" layout horizontal center on-tap="{{toggle}}">
    <core-item flex src="{{selectedItem.src}}" icon="{{selectedItem.icon}}" label="{{selectedItem ? (selectedItem.label || selected) : label}}"></core-item>
    <core-icon id="arrow" icon="{{opened ? 'arrow-drop-up' : 'arrow-drop-down'}}"></core-icon>
  </div>

  <core-dropdown id="dropdown" relatedTarget="{{$.control}}" opened="{{opened}}" halign="{{halign}}" valign="{{valign}}">
    <core-menu selected="{{selected}}" valueattr="{{valueattr}}" selectedItem="{{selectedItem}}" on-core-activate="{{activateAction}}">
      <content></content>
    </core-menu>
  </core-dropdown>

</template>
<script>

  Polymer({

    publish: {

      /**
       * True if the menu is open.
       *
       * @attribute opened
       * @type boolean
       * @default false
       */
      opened: false,

      /**
       * A label for the control. The label is displayed if no item is selected.
       *
       * @attribute label
       * @type string
       * @default 'Select an item'
       */
      label: 'Select an item',

      /**
       * The currently selected element. By default this is the index of the item element.
       * If you want a specific attribute value of the element to be used instead of the
       * index, set `valueattr` to that attribute name.
       *
       * @attribute selected
       * @type Object
       * @default null
       */
      selected: null,

      /**
       * Specifies the attribute to be used for "selected" attribute.
       *
       * @attribute valueattr
       * @type string
       * @default 'name'
       */
      valueattr: 'name',

      /**
       * Specifies the CSS class to be used to add to the selected element.
       * 
       * @attribute selectedClass
       * @type string
       * @default 'core-selected'
       */
      selectedClass: 'core-selected',

      /**
       * Specifies the property to be used to set on the selected element
       * to indicate its active state.
       *
       * @attribute selectedProperty
       * @type string
       * @default ''
       */
      selectedProperty: '',

      /**
       * Specifies the attribute to set on the selected element to indicate
       * its active state.
       *
       * @attribute selectedAttribute
       * @type string
       * @default 'active'
       */
      selectedAttribute: 'selected',

      /**
       * The currently selected element.
       *
       * @attribute selectedItem
       * @type Object
       * @default null
       */
      selectedItem: null,

      /**
       * Horizontally align the overlay with the control.
       *
       * @attribute halign
       * @type "left" | "right"
       * @default "left"
       */
      halign: 'left',

      /**
       * Vertically align the dropdown menu with the control.
       *
       * @attribute valign
       * @type "top" | "bottom"
       * @default "bottom"
       */
      valign: 'top'

    },

    activateAction: function() {
      this.opened = false;
    },

    toggle: function() {
      this.opened = !this.opened;
    }

  });

</script>
</polymer-element>